
<div class="col col-sm-6 mx-auto">

    <div class="card py-4 px-5">
        <form [formGroup]="form">
            <div asp-validation-summary="ModelOnly" class="alert alert-danger" hidden></div>
            <div class="text-center h4 mb-3">Log In</div>
            <div class="form-group mb-4">
                <label class="mb-2" asp-for="Username">Username</label>
                <input for="Username" class="form-control" formControlName="username" [ngClass]="{ 'is-invalid': (validErrors$ | async)?.Username || (validErrors$ | async)?._ }"/>
                <div class="invalid-feedback" *ngIf="(validErrors$ | async)?.Username">{{( validErrors$ | async)?.Username }}</div>
            </div>
            <div class="form-group mb-4">
                <label class="mb-2" >Password</label>
                <input type="password" class="form-control"  formControlName="password" [ngClass]="{ 'is-invalid': (validErrors$ | async)?.Password || (validErrors$ | async)?._ }"/>
                <div class="invalid-feedback" *ngIf="(validErrors$ | async)?.Password">{{( validErrors$ | async)?.Password }}</div>
            </div>
            <div class="alert alert-danger p-3 text-center" *ngIf="(validErrors$ | async)?._"> {{ (validErrors$ | async)._ }} </div>
            <div class="text-center"><button type="submit" class=" btn btn-primary" (click)="onSubmit()">Log in</button></div>
        </form>
        
    </div>
    </div>